<template>
  <div class="tabs-wrapper">
    <s-tabs :selected.sync="selectedTab">
      <s-tabs-head class="aaa">
        <s-tabs-item name="tab1" >
          <s-icon name="settings"></s-icon>
          Tab1
        </s-tabs-item>
        <s-tabs-item name="tab2">Tab2</s-tabs-item>
        <s-tabs-item name="tab3">Tab3</s-tabs-item>
        <s-tabs-item name="tab4">Tab4</s-tabs-item>
      </s-tabs-head>
      <s-tabs-body>
        <s-tabs-pane name="tab1">内容1</s-tabs-pane>
        <s-tabs-pane name="tab2">内容2</s-tabs-pane>
        <s-tabs-pane name="tab3">内容3</s-tabs-pane>
        <s-tabs-pane name="tab4">内容4</s-tabs-pane>
      </s-tabs-body>
    </s-tabs>
  </div>
</template>
<script>
import Icon from "../../../src/components/Icon.vue"
import Tabs from "../../../src/components/Tabs.vue";
import TabsHead from "../../../src/components/Tabs-head.vue";
import TabsBody from "../../../src/components/Tabs-body.vue";
import TabsItem from "../../../src/components/Tabs-item.vue";
import TabsPane from "../../../src/components/Tabs-pane.vue";
export default {
  components: {
    "s-icon":Icon,
    "s-tabs": Tabs,
    "s-tabs-head": TabsHead,
    "s-tabs-item": TabsItem,
    "s-tabs-body": TabsBody,
    "s-tabs-pane": TabsPane,
  },
  data() {
    return { selectedTab: "tab1" };
  },
};
</script>
<style lang="scss" scoped>
.tabshead{
    line-height: 38px;
}
</style>